<template>
    <div class="store-list">
        <!-- 货架列表 -->
        <el-container>
            <el-header>
                <div class="select">
                    <el-select v-model="name" placeholder="选择门店号">
                        <el-option v-for="item in list.shop" :key="item.id" :label="item.shop_name" :value="item.value"
                            :disabled="item.disabled" />
                    </el-select>
                </div>
                <el-input v-model="input" placeholder="输入产品名字" clearable />
                <el-button type="primary">查询</el-button>
                <el-button type="primary">新增</el-button>
            </el-header>
            <el-main>
                <el-table :data="tableData" style="width:100%">
                  <el-table-column fixed prop="date" label="Date" width="150" />
                  <el-table-column prop="name" label="Name" width="120" />
                  <el-table-column prop="date" label="Date" width="150" />
                  <el-table-column prop="name" label="Name" width="150" />
                  <el-table-column prop="name" label="Name" width="150" />
                  <el-table-column prop="name" label="Name" width="150" />
                  <el-table-column prop="name" label="Name" width="150" />
                   
                  <el-table-column fixed="right" label="操作" width="220">
                    <template #default>
                      <el-button link type="primary" size="small" @click="handleClick">编辑</el-button>
                      <el-button link type="primary" size="small">详情</el-button>
                      <el-button link type="primary" size="small">入库</el-button>
                      <el-button link type="primary" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <div class="demo-pagination-block">
                    <!-- <div class="demonstration">Jump to</div> -->
                    <el-pagination 
                    v-model:current-page="currentPage3" 
                    v-model:page-size="pageSize3" 
                    :disabled="disabled" 
                    :background="background" 
                    layout="prev, pager, next, jumper" 
                    :total="1000"
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" />
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import{shopList,shelvesApi}from "@/apis/shelves"
import {reactive,ref}from "vue"

const list = reactive({
    //门店
    shop:[],
    // 货架
    shelvesApi:[]
})
const name=ref('')
const shop=async()=>{
    try {
      // 发送网络请求查询数据
        const {data,code} = await shopList()
        console.log(data);

        if(code==200){
            // 数据
            list.shop=data.rows
            // 总条数
            //  count.value=data.count
             //存列表数据在sessionStorage
             console.log(list.shop);
            
        }
      } catch (error) {
        console.log('error:', error)
      }
}
shop()
// 改变总数时触发
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>

<style lang="less" scoped>
@import "@/style/common.less";

.store-list {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    position: relative;
    padding: 12px;
    background: cadetblue;
    .el-header {
        display: block;
        height: 49px;
        padding: 8px 12px;
        border-bottom: 1px solid #ddd;
        text-align: right;
        display: flex;
        justify-content: right;
        align-items: center;

        .el-input {
            margin: 0px 10px;
            width: 200px;
        }
    }

    .el-button:last-child {
        background: @h1;
        color: @h13;
        border: none;


    }

    .el-main {
        height:500px;
        width: 100%;
        padding: 10px;
        background: red;
        .el-table{
          width: 100%;
          height: 100%;
          .el-table-column{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
          }
        }
    }

    .el-footer {
        height: 43px;
        width: calc(100% - 20px);
        position: absolute;
        bottom: 0;
        border-top: 1px solid @h6;
        padding: 5px;
        display: flex;
        justify-content:right
    }

}
</style>
